<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <script type="text/javascript"  src="../js/vue.js"></script>
</head>


<body>
    <div id="root">
        <h1>欢迎来 {{name}} 学习</h1>
       <a href="http://www.baidu.com"  @click.prevent="showInfo">点击提示信息</a>

       <div class="demo1" @click="showInfo">
        <button @click="showInfo">点击提示信息</button>
       </div>
       <button @click.once="showInfo">一次</button>
    </div>
</body>

<!-- Vue中的事件修饰符:   修饰符可以连着用@click.prevent.stop
1.prevent: 阻止默认事件 (常用) :      
2.stop: 阻止事件冒泡 (常用) :
3.once: 事件只触发一次 (常用) ;
4.capture:使用事件的捕获模式:
5.self:只有event.target是当前操作的元素时才触发事件;
6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕: -->
<script type="text/javascript">
   Vue.config.productionTip=false;
 
    let vm =new Vue({
        el:"#root",
        data:{
            name:"jj"
        },
        methods:{
            showInfo(e){
                //e.preventDefault();
                // e.stopPropagation();
                alert("同学你好!");
            }
        }
    })
</script>
</html>